<template>
  <div>
    <el-form :rules="rules" ref="formRule" :model="formData" label-width="80px">
      <el-form-item label="字段名称" prop="name">
        <el-input v-model.trim="formData.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="字段类型" prop="type">
        <div v-if="props.title.includes('编辑')">
          {{ filterTypeName(formData.type) }}
        </div>
        <div v-else>
          <el-select
            v-model="formData.type"
            placeholder="请选择"
            clearable
            filterable
            @change="fieldTypeChange()"
          >
            <el-option
              v-for="item in options.opt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item
        label="设置可选范围"
        prop="customSelectsRange"
        v-if="formData.type == 6 || formData.type == 7"
      >
        <div class="fieldSelectBox">
          <div class="fieldSelectTitle"><span>|</span>可选范围</div>
          <el-empty
            v-if="!rangeList.length > 0"
            style="height: 100px"
            description="暂无数据"
          ></el-empty>
          <div v-else>
            <div
              v-for="(iten, index) in rangeList"
              :key="index"
              class="fieldSelectInput"
            >
              <el-icon
                :size="28"
                color="red"
                class="pointer"
                @click="handleDeleteIcon(index)"
                ><Remove
              /></el-icon>

              <el-input
                v-model.trim="rangeList[index]"
                placeholder="请输入可选范围"
              ></el-input>
            </div>
          </div>
          <div class="addbtn">
            <el-button
              type="text"
              icon="el-icon-circle-plus-outline"
              @click="addSelectRange"
              >添加可选项</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="字段属性"
        prop="attributes"
        v-if="
          formData.type == 1 ||
          formData.type == 2 ||
          formData.type == 3 ||
          formData.type == 4 ||
          formData.type == 5 ||
          formData.type == 6 ||
          formData.type == 7
        "
      >
        <el-radio
          v-model="formData.attributes"
          v-if="
            formData.type == 1 ||
            formData.type == 2 ||
            formData.type == 3 ||
            formData.type == 4 ||
            formData.type == 6 ||
            formData.type == 7
          "
          :label="2"
          >必填</el-radio
        >
        <el-radio
          v-model="formData.attributes"
          v-if="
            formData.type == 1 ||
            formData.type == 2 ||
            formData.type == 3 ||
            formData.type == 5
          "
          :label="1"
          >只读</el-radio
        >
        <el-radio v-model="formData.attributes" v-show="false" :label="0"
          >只读</el-radio
        >

        <div>
          <el-checkbox
            label="多行"
            v-if="formData.type == 1"
            name="attributes"
            v-model="formData.isTextarea"
          ></el-checkbox>
        </div>
        <div>
          <el-checkbox
            v-if="formData.type == 2"
            label="显示千分位分隔符"
            name="attributes"
            v-model="formData.thousandsSeparator"
          ></el-checkbox>
        </div>
        <div style="display: flex">
          <el-checkbox
            v-if="formData.type == 2"
            label="小数位数"
            v-model="showDecimalPlaces"
            @change="isShowInput"
            name="attributes"
          ></el-checkbox>
          <el-input
            v-if="formData.type == 2"
            style="margin-left: 20px"
            placeholder="请输入"
            v-show="showDecimalPlaces"
            v-model.trim="formData.decimalPlaces"
            clearable
          />
        </div>
      </el-form-item>
      <el-form-item
        label="显示精度"
        prop="timePrecision"
        v-if="formData.type == 3"
      >
        <el-select
          v-model="formData.timePrecision"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in timePrecisionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="引导文字"
        prop="placeholder"
        v-if="formData.type == 1 || formData.type == 2 || formData.type == 3"
      >
        <el-input
          v-model.trim="formData.placeholder"
          placeholder="填写完显示在框里"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="提示说明"
        prop="prompt"
        v-if="
          formData.type == 1 ||
          formData.type == 2 ||
          formData.type == 3 ||
          formData.type == 4 ||
          formData.type == 6 ||
          formData.type == 7
        "
      >
        <el-input
          v-model.trim="formData.prompt"
          placeholder="当该选项为必填项而且输入错误时提示"
          type="textarea"
          :autosize="{ minRows: 2 }"
          clearable
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, watch, toRef, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  title: {
    default: "",
  },
  editInfo: {
    default: {},
  },
  show: {
    default: false,
  },
});
const formData = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: "",
  resource: "",
  desc: "",
});
const showDecimalPlaces = ref(false);
const rangeList = ref([]);
const formRule = ref({});
//表单重置
const rest = () => {
  formData.value = {
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: "",
    resource: "",
    desc: "",
  };
  // proxy.$clearForm(formRule.value);
};

watch(
  () => props.show,
  (n, o) => {
    if (n) {
      rest();
      if (props.title.includes("添加")) {
      } else {
        let data = JSON.parse(JSON.stringify(props.editInfo));
        formData.value = data;
        if (formData.value.decimalPlaces) {
          showDecimalPlaces.value = true;
        } else {
          showDecimalPlaces.value = false;
        }
        if (formData.value.customSelects) {
          rangeList.value = formData.value.customSelects.map(
            (item) => item.text
          );
        }
      }
      nextTick(() => {
        formRule.value.clearValidate();
      });
    }
  },
  {
    immediate: true,
  }
);

//显示精度
const timePrecisionList = ref([
  {
    value: 1,
    label: "年-月-日",
  },
  {
    value: 2,
    label: "年-月-日 时",
  },
  {
    value: 3,
    label: "年-月-日 时:分",
  },
  {
    value: 4,
    label: "年-月-日 时:分:秒",
  },
]);
//字段类型
const options = reactive({
  opt: [
    {
      value: 1,
      label: "文本",
    },
    {
      value: 2,
      label: "数字",
    },
    {
      value: 3,
      label: "时间",
    },
    {
      value: 4,
      label: "附件",
    },
    // {
    //   value: 5,
    //   label: "图片",
    // },
    {
      value: 6,
      label: "单选框",
    },
    {
      value: 7,
      label: "复选框",
    },
    // 业务调整 暂时注释
    // {
    //   value: 8,
    //   label: "关联对象",
    // },
    // {
    //   value: 9,
    //   label: "关联属性",
    // },
  ],
});
//小数位数 是否显示输入框
const isShowInput = () => {
  if (!showDecimalPlaces.value) {
    formData.value.decimalPlaces = "";
  }
};
watch(
  ()=>rangeList.value,
  (n) => {
    formData.value.CustomSelectTexts = Object.values(n);
    console.log(formData.value);
  },
  { deep: true }
);
//验证输入框
let validateRange = (rule, value, callback) => {
  if (!rangeList.value?.length)
    return callback(new Error(`${rule.label}不能为空`));
  rangeList.value?.some((item) => {
    if (!item) {
      return callback(new Error(`${rule.label}不能为空`));
    }
  });
  let obj = {};
  rangeList.value?.reduce((pre, cur, index) => {
    if (!obj[cur]) {
      obj[cur] = 0;
    }
    obj[cur]++;
  }, {});
  let same = Object.values(obj)?.some((item) => {
    return Number(item) > 1;
  });
  if (same) {
    return callback(new Error(`${rule.label}不能有重复选项`));
  } else {
    callback();
  }
};
const rules = reactive({
  name: [{ required: true, message: "字段名称不能为空", trigger: "blur" }],
  type: [{ required: true, message: "请选择字段类型", trigger: "change" }],
  customAssociatedBusinessObjectId: [
    { required: true, message: "业务对象不能为空", trigger: "change" },
  ],
  customFieldAssociatedBusinessAttributess: [
    { required: true, message: "显示字段不能为空", trigger: "change" },
  ],
  customFieldIdFromId: [
    {
      required: true,
      message: "填充来源值不能为空！",
      trigger: "change",
    },
  ],
  customSelectsRange: [
    {
      required: true,
      validator: validateRange,
      trigger: "blur",
      label: "设置可选范围",
      vm: this,
    },
  ],
});

const filterTypeName = (type) => {
  let str = "";
  console.log(type);
  switch (Number(type)) {
    case 1:
      str = "文本";
      break;
    case 2:
      str = "数字";
      break;
    case 3:
      str = "时间";
      break;
    case 4:
      str = "附件";
      break;
    case 5:
      str = "图片";
      break;
    case 6:
      str = "单选框";
      break;
    case 7:
      str = "复选框";
      break;
    case 8:
      str = "关联对象";
      break;
  }
  return str;
};
//字段类型改变

const fieldTypeChange = () => {
  rangeList.value = [];
};
//添加可选范围
const addSelectRange = () => {
  rangeList.value.push("");
};
//删除
const handleDeleteIcon = (index) => {
  if (formData.value.type == 6 || formData.value.type == 7) {
    //可选范围
    rangeList.value.splice(index, 1);
  } else if (formData.value.type == 8) {
    //数据填充规则
    formData.value.customFieldDataFillingRules.splice(index, 1);
  }
};
defineExpose({
  formRule,
  formData,
});
</script>

<style lang="scss" scoped>
:deep(.el-textarea) {
  font-family: auto !important;
  textarea {
    font-family: auto;
  }
}
:deep(.el-form-item) {
  .el-form-item__label {
    white-space: nowrap;
    word-break: keep-all;
  }
  .el-form-item__content .el-select {
    width: 100%;
    .el-input {
      width: 100%;
    }
  }
  .el-empty__image {
    height: 50px;
    padding: 0;
  }
}

.fieldSelectBox {
  border: 1px solid #ddd;
  width: 100%;
  .fieldSelectTitle {
    padding-left: 30px;
    background-color: rgb(245, 244, 244);
    position: relative;
    span {
      color: #ddd;
      position: absolute;
      // transform: translateY(-8px);
      left: 24px;
      top: 50%;
      transform: translateY(-54%);
    }
  }
  .addbtn {
    border-top: 1px solid #ddd;
    padding-left: 30px;
  }
  .fieldSelectInput {
    padding: 12px 6px;
    display: flex;
    align-items: center;
    .deleteIcon {
      font-size: 24px;
      color: red;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.fillText {
  margin: 0 20px;
  word-break: keep-all;
  white-space: nowrap;
}
:deep(.el-form-item__content) {
  display: block;
}
</style>
